import React, { useState,useEffect } from 'react';
import { createStackNavigator,StackNavigator } from '@react-navigation/stack';
import { View, Text,ScrollView, TouchableOpacity,StyleSheet,
  ImageBackground,Dimensions,AsyncStorage,Alert ,DeviceEventEmitter,RNRestart
} from 'react-native';
import { useFocusEffect } from '@react-navigation/native';
import Btn from '../../common/Btn';
import '../../common/global'
import Icon from 'react-native-vector-icons/AntDesign';


// {context:'第一个第一个第一个第一个第一个第一个第一个第一个第一个第一个第一个第一个第一个第一个第一个第一个第一个',time:'2021-04-21 18:36:53'},
// {context:'第二个',time:'2021-04-21 18:36:53'},
// {context:'第三个',time:'2021-04-21 18:36:53'},
// {context:'第四个',time:'2021-04-21 18:36:53'},
// {context:'第四个',time:'2021-04-21 18:36:53'},
const TreeHole =({ navigation,route,props })=>{
  const [Data,setData]=useState([]);
  // componentDidMount(()=>{
  //   this._navListener = this.props.navigation.addListener('didFocus', () => {
      
  //   })
  //   componentWillUnmount(()=>{
  //     this._navListener.remove();
  //   })
  useEffect(()=>{
    AsyncStorage.getItem('data').then(res=>{
        if(res){
            setData(JSON.parse(res))
        }
    })

  },[route.params?.Data]);

  useEffect(() => {
    // AsyncStorage.getItem('data').then(res=>{
    //         if(res){
    //             setData(JSON.parse(res))
    //         }})
    DeviceEventEmitter.addListener('refresh', (message) => {
        if (message) {
            // 这里面是逻辑实现
            // setData((data) => [...data, message.a] )
            AsyncStorage.getItem('data').then(res=>{
              if(res){
                  setData(JSON.parse(res))
              }})
        }
    })
}, []);

  function del(idx){
    Alert.alert(
      '',
      '你的心事将转化为灵菌，\n长于树旁，无人知晓。',
      [{
        text:'取消',
        onPress:()=>{
          navigation.navigate('TreeHole');
        }
      },
      {
        text:'确定',
        onPress:()=>{
          let san=Data.splice(idx,1);
          console.log(san);
          AsyncStorage.setItem('data',JSON.stringify(Data)).then(res=>{
            console.log(Data); 
            setData(Data);
            DeviceEventEmitter.emit('refresh',{
              'a':Data,
            }) 
            navigation.navigate('word')
            
          })
        }
      }]
    )
  }

  return (
    <ScrollView >
      <View >
        <Text style={styles.title}>树洞菌</Text>
        <ScrollView style={styles.list}>
          {
            Data.map((Data,idx)=>(
              <TouchableOpacity style={styles.item} key={idx}>
                <View>
                  <Text style={styles.context}>{Data.context}</Text>
                  <Text style={{color:'#808080'}}>{Data.time}</Text>
                  <TouchableOpacity style={styles.del} onPress={()=>del(idx)}>
                    <Icon  size={20} name='closecircleo' color='#CD853F'></Icon>
                    <Text style={{marginLeft:5}}>化菌</Text>
                  </TouchableOpacity>
                </View>
              </TouchableOpacity>
            ))
          }
        </ScrollView>
        <TouchableOpacity style={styles.new} onPress={()=>{navigation.push('Newlist')}}>
            <Icon  size={45} name='pluscircleo' color='#DEB887'></Icon>
            {/* <Text style={{marginLeft:0}}>新建树洞</Text> */}
        </TouchableOpacity>
      </View>
    </ScrollView>
  )
}
export default TreeHole;

const styles = StyleSheet.create({
  title:{
    width:ptd(375),
    height:100,
    // backgroundColor:'yellow',
    textAlign:'center',
    fontSize:30,
    paddingTop:30,
    color:'#808080',
   
  },
  list:{
    
    height:0.67*Dimensions.get('window').height,
  },
  item:{
    // borderWidth:1,
    // backgroundColor:'pink',
    borderTopWidth:2,
    borderTopColor:'#A0522D',
    paddingLeft:ptd(40),
    color:'#696969',
    // position: 'relative',
    paddingTop:30,
    paddingBottom:10,
  },
  context:{
    width:200,
    marginBottom:10,
  },
  del:{
    flexDirection:'row',
    // position: 'absolute',
    left:ptd(260),
    bottom:20,
  },
  new:{
    // backgroundColor:'#87CEFA',
    height:85,
    paddingLeft:ptd(165),
    paddingTop:10
  }
})
